/**
 * 入参
 *
 */
import React, { PropTypes, PureComponent, Fragment } from 'react';
import {
  PrimaryC,
  DATA_ENTRY,
  InputNumberC,
  ModalC,
  PrimaryGhostC,
  codeType,
  TradingDirectC,
  TradingTypeC,
  InputC,
  SingleDateC,
  AdvancedSearch,
  ProductGroupSepC,
  SelectC,
  NoQueryC,
  TableC,
  FirstHeaderC,
  SecondHeaderC,
  TradingMarketC,
} from '../../../../comps';
import { MinusCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Input, Button, message, Table, Divider, DatePicker, Select, Modal } from 'antd';
import style from '../index.less';
import colors from '../../../../css/colors';
import { connect } from 'dva';
import { init } from 'echarts';
const { TextArea } = Input;
const FormItem = Form.Item;
const FormItemLayout = {
  labelCol: {
    xl: { span: 10, offset: 0 },
    xxl: { span: 8, offset: 0 },
  },
  wrapperCol: {
    xl: { span: 13, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};
const numericType = [
  //筛选方式 数值类型对应的下拉
  {
    value: 'value',
    title: '按数值',
  },
  {
    value: 'rank',
    title: '按排名',
  },
];
const boolType = [
  //筛选方式 是否对应的下拉
  {
    value: 'bool',
    title: '按是否',
  },
];
const enumType = [
  //筛选方式 枚举对应的下拉
  {
    value: 'enum',
    title: '按枚举',
  },
];
const boolValue = [
  //取值是否对应的下拉
  {
    value: '1',
    title: '是',
  },
  {
    value: '0',
    title: '否',
  },
];
class FormItemC extends PureComponent {
  static defaultProps = {};
  state = {
    isRank: false, //是否是排名
  };
  componentDidMount() {
    this.props.onRef(this);
    const { value } = this.props;
    if (this.props.screeningIndexType) {
      //判断排名还是数值展示
      this.props.form.setFieldsValue({
        [`${value}shaixuanType`]: this.props.screeningIndexType,
      });
      this.setState({
        isRank: this.props.screeningIndexType == 'rank' ? true : false,
      });
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    //回填数据设置值
    const { value } = this.props;
    if (
      JSON.stringify(this.props.detailValue) != JSON.stringify(nextProps.detailValue) ||
      JSON.stringify(this.props.screeningIndexType) != JSON.stringify(nextProps.screeningIndexType)
    ) {
      if (nextProps.screeningIndexType) {
        this.props.form.setFieldsValue({
          [`${value}shaixuanType`]: nextProps.screeningIndexType,
        });
        this.setState({
          isRank: nextProps.screeningIndexType == 'rank' ? true : false,
        });
      }
      this.props.form.setFieldsValue({
        [`${value}num1`]: nextProps.detailValue[0],
        [`${value}num2`]: nextProps.detailValue[1],
      });
    }
  }
  //删除当前行 告知父组件
  delRow = (value) => {
    this.props.delRow(this.props.indexType, value);
  };
  //筛选类型切换事件
  shaixunTypeChange = (e) => {
    const { value, initValue } = this.props;

    this.props.form.setFieldsValue({
      [`${value}num1`]: e == 'rank' ? 0 : initValue[0],
      [`${value}num2`]: e == 'rank' ? 100 : initValue[1],
    });
    this.setState({
      isRank: e == 'rank' ? true : false,
    });
  };

  changeValueType = (valueType) => {
    this.valueType = valueType;
  };
  //父组件调用方法
  getInfo = () => {
    const {
      form: { getFieldsValue, validateFieldsAndScroll },
      indexType,
      value,
      title,
      displayType,
    } = this.props;
    var obj = {};
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        let num1;
        let num2;
        let select;
        let shaixuanType;
        for (var i in values) {
          if (i.indexOf('num1') > 0) num1 = values[i];
          if (i.indexOf('num2') > 0) num2 = values[i];
          if (i.indexOf('select') > 0) select = values[i];
          if (i.indexOf('shaixuanType') > 0) shaixuanType = values[i];
        }
        obj.indicator = value;
        obj.title = title;
        obj.displayType = displayType;
        obj.value = select ? select : [num1, num2];
        obj.indexType = indexType;
        if (shaixuanType && displayType == 'numeric') obj.screeningIndexType = shaixuanType;
      }
    });
    if (Object.keys(obj).length) {
      return obj;
    } else {
      return undefined;
    }
  };
  render() {
    const {
      width,
      displayType,
      initValue,
      form: { getFieldValue, validateFields },
      value,
      title,
      detailValue,
      screeningIndexType,
    } = this.props;
    const { isRank } = this.state;
    return (
      <div className={style.settingTable}>
        <div style={{ width: width + '%' }}>
          <Form.Item>{title}</Form.Item>
        </div>
        <div style={{ width: width + '%' }}>
          <SelectC
            form={this.props.form} // form对象
            dataIndex={`${value}shaixuanType`} // Form识别的Item ID
            dataSource={displayType == 'numeric' ? numericType : displayType == 'enum' ? enumType : boolType}
            initialValue={displayType == 'numeric' ? screeningIndexType || 'value' : displayType == 'enum' ? enumType[0].value : boolType[0].value}
            onChange={this.shaixunTypeChange}
            positionBody={true}
          />
        </div>
        <div style={{ width: width * 2 + '%' }}>
          {displayType == 'numeric' ? (
            isRank ? (
              <div className={style.quzhi}>
                <InputNumberC
                  form={this.props.form}
                  dataIndex={`${value}num1`}
                  initialValue={detailValue ? detailValue[0] : 0}
                  unit={'%'}
                  min={0}
                  max={100}
                  precision={0}
                  validateStatus={this.state.myvalidateStatus}
                  // onBlur={(e)=>this.numChange(e,1)}
                  onChange={() => this.changeValueType(`${value}num1`)}
                  rules={[
                    {
                      validator: (rule, val, callback) => {
                        if (val != 0 && !val) {
                          //是必填并且没有值
                          callback('输入框不可为空');
                        } else if (getFieldValue(`${value}num2`) < val) {
                          callback('初始值不能大于结束值');
                        } else {
                          if (this.valueType === rule.field) {
                            validateFields([`${value}num2`], { force: true });
                          }
                          callback();
                        }
                      },
                    },
                  ]}
                />
                <div>-</div>
                <InputNumberC
                  form={this.props.form}
                  dataIndex={`${value}num2`}
                  initialValue={detailValue ? detailValue[1] : 100}
                  unit={'%'}
                  min={0}
                  max={100}
                  precision={0}
                  onChange={() => this.changeValueType(`${value}num2`)}
                  // onBlur={(e)=>this.numChange(e,2)}
                  rules={[
                    {
                      validator: (rule, val, callback) => {
                        if (val != 0 && !val) {
                          //是必填并且没有值
                          callback('输入框不可为空');
                        } else if (getFieldValue(`${value}num1`) > val) {
                          callback('初始值不能大于结束值');
                        } else {
                          if (this.valueType === rule.field) {
                            //因为最大最小值有关联关系，所以验证当前表单的时候 再去校验另一个表单
                            validateFields([`${value}num1`], { force: true });
                          }
                          callback();
                        }
                      },
                    },
                  ]}
                />
              </div>
            ) : (
              <div className={style.quzhi}>
                <InputNumberC
                  form={this.props.form}
                  dataIndex={`${value}num1`}
                  initialValue={detailValue ? detailValue[0] : initValue[0]}
                  min={initValue[0]}
                  max={initValue[1]}
                  precision={4}
                  validateStatus={this.state.myvalidateStatus}
                  // onBlur={(e)=>this.numChange(e,1)}
                  onChange={() => this.changeValueType(`${value}num1`)}
                  rules={[
                    {
                      validator: (rule, val, callback) => {
                        if (val != 0 && !val) {
                          //是必填并且没有值
                          callback('输入框不可为空');
                        } else if (getFieldValue(`${value}num2`) < val) {
                          callback('初始值不能大于结束值');
                        } else {
                          if (this.valueType === rule.field) {
                            validateFields([`${value}num2`], { force: true });
                          }
                          callback();
                        }
                      },
                    },
                  ]}
                />
                <div>-</div>
                <InputNumberC
                  form={this.props.form}
                  dataIndex={`${value}num2`}
                  initialValue={detailValue ? detailValue[1] : initValue[1]}
                  min={initValue[0]}
                  max={initValue[1]}
                  precision={4}
                  onChange={() => this.changeValueType(`${value}num2`)}
                  // onBlur={(e)=>this.numChange(e,2)}
                  rules={[
                    {
                      validator: (rule, val, callback) => {
                        if (val != 0 && !val) {
                          //是必填并且没有值
                          callback('输入框不可为空');
                        } else if (getFieldValue(`${value}num1`) > val) {
                          callback('初始值不能大于结束值');
                        } else {
                          if (this.valueType === rule.field) {
                            //因为最大最小值有关联关系，所以验证当前表单的时候 再去校验另一个表单
                            validateFields([`${value}num1`], { force: true });
                          }
                          callback();
                        }
                      },
                    },
                  ]}
                />
              </div>
            )
          ) : (
            <SelectC
              form={this.props.form} // form对象
              dataIndex={`${value}select`} // Form识别的Item ID
              dataSource={
                displayType == 'enum'
                  ? initValue.map((item) => {
                      return { value: item, title: item };
                    })
                  : boolValue
              }
              initialValue={displayType != 'enum' ? (detailValue !== undefined ? detailValue[0] : initValue[0]) : detailValue || undefined}
              isMultiple={displayType == 'enum' ? true : false}
              showSearch={false}
              positionBody={true}
              rules={[{ required: true, message: `选项不可为空` }]}
            />
          )}
        </div>
        <div style={{ width: '45px', textAlign: 'center' }}>
          <Form.Item>
            <MinusCircleOutlined
              style={{ color: colors.debtAndProfit.text[0], fontSize: '16px' }}
              onClick={() => {
                this.delRow(value);
              }}
            />
          </Form.Item>
        </div>
      </div>
    );
  }
}
export default connect(({ AssetPreparationM, userM: user, loading }) => ({
  AssetPreparationM,
  user,
  loading,
}))(Form.create()(FormItemC));
